<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,user-scale=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0">
    <title>聚雅缘</title>
    <link rel="stylesheet" href="./css/index.css">
    <link rel="stylesheet" href="https://cdn.bootcss.com/weui/1.1.3/style/weui.min.css">
    <link rel="stylesheet" href="https://cdn.bootcss.com/jquery-weui/1.2.1/css/jquery-weui.min.css">
</head>
<body>
<div class="container">
    <div class="top">
        <img src="./img/top-bg.png" alt="" width="100%">
        <div class="top-content">
            <div class="text-top">
                <p>2019</p>
                <p>第四届亚马跑</p>
            </div>
            <div class="text-center">
                <p>全球线上跑</p>
                <p>（广雅情怀，迈步共隽）</p>
            </div>
            <div class="bottom-btn">
                <a href="./punch.html">
                    <div class="btn">马上开启你的跑步之旅</div>
                </a>
            </div>
        </div>
    </div>
    <div class="rule">
        <div class="text-line">
            <div class="line"></div>
            <div class="text">全球雅马跑事宜/规则</div>
            <div class="line"></div>
        </div>
        <img src="./img/icon-down.png" alt="" id="down">
    </div>
    <div class="rule-text">
        <p class="title">线上跑注意事项：</p>
        <p>1、报名截止时间为：10月10日23:59</p>
        <p>2、活动正式上线时间：10月11日12:00——11月3日23:59</p>
        <p>3、线上跑的距离记录：用悦跑圈APP等跑步记录应用完成并记录1.31公里或以上；</p>
        <p>4、参赛包主办方将以统一以快递形式寄送，请报名时务必正确填写邮递地址。</p>
    </div>
    <div class="list">
        <div class="top-tab">
            <div class="tab-item active" data-tab="#tab1"><span>参与榜</span></div>
            <span></span>
            <div class="tab-item" data-tab="#tab2"><span>善款榜</span></div>
            <span></span>
            <div class="tab-item" data-tab="#tab3"><span>点赞榜</span></div>
            <span></span>
            <div class="tab-item" data-tab="#tab4"><span>名师榜</span></div>
        </div>
        <div class="cell-list" id="tab1">
            <div class="cell">
                <span>界别</span>
                <span>报名人数</span>
            </div>
            <div class="cell">
                <span>95届</span>
                <span>600人</span>
            </div>
            <div class="cell">
                <span>95届</span>
                <span>600人</span>
            </div>
            <div class="cell">
                <span>95届</span>
                <span>600人</span>
            </div>
            <div class="cell">
                <span>95届</span>
                <span>600人</span>
            </div>
            <div class="cell">
                <span>95届</span>
                <span>600人</span>
            </div>
        </div>
        <div class="cell-list hidden" id="tab2">
            <div class="cell">
                <span>界别</span>
                <span>善款</span>
            </div>
            <div class="cell">
                <span>95届</span>
                <span>60万</span>
            </div>
            <div class="cell">
                <span>95届</span>
                <span>60万</span>
            </div>
            <div class="cell">
                <span>95届</span>
                <span>60万</span>
            </div>
            <div class="cell">
                <span>95届</span>
                <span>60万</span>
            </div>
            <div class="cell">
                <span>95届</span>
                <span>60万</span>
            </div>
        </div>
        <div class="cell-list hidden" id="tab3">
            <div class="cell">
                <span>界别</span>
                <span>点赞数</span>
            </div>
            <div class="cell">
                <span>95届</span>
                <span>600</span>
            </div>
            <div class="cell">
                <span>95届</span>
                <span>600</span>
            </div>
            <div class="cell">
                <span>95届</span>
                <span>600</span>
            </div>
            <div class="cell">
                <span>95届</span>
                <span>600</span>
            </div>
            <div class="cell">
                <span>95届</span>
                <span>600</span>
            </div>
        </div>
        <div class="cell-list hidden" id="tab4">
            <div class="cell">
                <span>界别</span>
                <span>名称</span>
            </div>
            <div class="cell">
                <span>95届</span>
                <span>张三</span>
            </div>
            <div class="cell">
                <span>95届</span>
                <span>李四</span>
            </div>
            <div class="cell">
                <span>95届</span>
                <span>张三</span>
            </div>
            <div class="cell">
                <span>95届</span>
                <span>李四</span>
            </div>
            <div class="cell">
                <span>95届</span>
                <span>张三</span>
            </div>
        </div>
    </div>
    <div class="bottom">
        <a href="./sign.html">
            <div class="btn primary" style="margin-bottom: 10px;">立即报名/上传跑步截图</div>
        </a>
        <div class="bottom-buttons">
            <div class="btn ghost"><a href="#">参与线下跑</a></div>
            <div class="btn ghost" style="margin: 0 16px;"><a href="#">参与线上跑</a></div>
            <div class="btn ghost"><a href="#">GY加油包</a></div>
        </div>
    </div>
</div>
</body>
<!-- body 最后 -->
<script src="https://cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/jquery-weui/1.2.1/js/jquery-weui.min.js"></script>

<!-- 如果使用了某些拓展插件还需要额外的JS -->
<script src="https://cdn.bootcss.com/jquery-weui/1.2.1/js/swiper.min.js"></script>
<script src="https://cdn.bootcss.com/jquery-weui/1.2.1/js/city-picker.min.js"></script>
<script>
    $('.tab-item').click(function (ev) {
        $(this).addClass('active').siblings().removeClass('active')
        setShow(ev.currentTarget.dataset.tab)
    })
    var count = 0
    $('.rule').click(function () {
        $('.rule-text').slideToggle('slow')
        if (count) {
          $('#down').css({
              'transform': 'rotate(0deg)'
          })
          count = 0
        } else {
          $('#down').css({
              'transform': 'rotate(180deg)'
          })
          count = 1
        }
    })
    $('#ghost-btn').click(function () {
        $.toast('功能尚未开放', 'text')
    })

    var ids = ['#tab1', '#tab2', '#tab3', '#tab4']
    function setShow (id) {
        ids.forEach(function (item) {
            if (id === item) {
                $(item).removeClass('hidden')
            } else {
                $(item).addClass('hidden')
            }
        })
    }
</script>
</html>